<template>
    <div class="FollowUpRecordCont">
      <!-- 操作跟进记录 -->
      <!-- <Row>
        <Col span="12">
          <Select v-model="operationFollowRecord" filterable style="width:200px" @on-change="operationFollowRecordFun">
            <Option v-for="(item, index) in RecordList" :value="item.value" :key="index">{{ item.label }}</Option>
          </Select>
        </Col>
        <Col span="12" style=" text-align: right;" v-if="unlocking('客户管理', '3000002') && servicePersonnelId.customerType == '49'">
          <Poptip placement="top-end" >
            <Button type="primary">添加跟进</Button>
            <div slot="content">
              <Button type="primary" v-if="servicePersonnelId.status >= 11" @click="AddFollowUpFun('ReturnVisit')">回访</Button>
              <Button  type="primary" v-if="servicePersonnelId.status > 11 && visitResultMess" @click="AddFollowUpFun('InvitationToVisit')" style=" margin: 0 10px;">邀约到访</Button>
              <Button type="primary" v-if="servicePersonnelId.status > 11" @click="AddFollowUpFun('RetainCapital')">来人</Button>
            </div>
          </Poptip>
        </Col>
      </Row> -->
      <!-- 跟进记录内容 -->
      <div class="FollowUpRecordMian">
        <div class="noData" v-show="pageData.total == 0">暂无数据</div>
        <Timeline>
          <template v-for="(item,index) in customerPortrait">
            <TimelineItem v-if="item.category == 1" :key="index">
              <!-- <p><span>操作时间：{{item.operationTime}}</span><span>跟进类型：跟进计划</span><span>操作人：{{item.operatorName}}{{' - ' + item.orgName}}</span></p> -->
              <p><span>操作时间：{{item.operationTime}}</span><span>跟进类型：跟进计划</span><span>操作人：{{item.operatorName}}</span></p>
              <p><span>客户：{{item.customerName}}</span><span>跟进类型：{{item.followType == 101 ? '首看回访' : item.followType == 102 ? '复看回访' : item.followType == 103 ? '日常回访' : ''}}</span><span>跟进时间：{{item.timeData}}</span></p>
            </TimelineItem>
            <TimelineItem v-if="item.category == 2 || item.category == 3" :key="index">
              <p><span>操作时间：{{item.operationTime}}</span><span>跟进类型：{{item.category == 2 ? '首看回访' : item.category == 3 ? '复看回访' : item.category == 4 ? '日常回访' : ''}}</span><span>操作人：{{item.operatorName}}</span></p>
              <p>跟进记录：{{item.gistRemark}}</p>
            </TimelineItem>
            <TimelineItem v-if="item.category == 4" :key="index">
              <p><span>跟进时间：{{item.operationTime}}</span><span>跟进人：{{item.operatorName}}</span></p>
              <p>要点备注：{{item.gistRemark}}</p>
            </TimelineItem>
            <TimelineItem v-if="item.category == 6 && appId!=49" :key="index">
              <p><span>操作时间：{{item.operationTime}}</span><span>跟进类型：操作</span><span>操作人：{{item.operatorName}}</span></p>
              <p>{{item.followType == 601 ? '联系了客户' : item.followType == 602 ? '编辑了客户信息' : ''}}</p>
            </TimelineItem>
            <TimelineItem v-if="item.category == 7" :key="index">
              <p><span>操作时间：{{item.operationTime}}</span><span>跟进类型：线上互动</span><span>操作人：{{item.operatorName}}</span></p>
              <p><span>客户昵称：{{item.nickName}}</span><span>来源渠道：{{item.channel}}</span><span>互动方式：{{item.interactiveMode}}</span></p>
              <p><span>互动对数/时长：{{item.interactiveData}}</span><span>互动时间：{{item.timeData}}</span></p>
              <p>跟进要点：{{item.gistRemark}}</p>
            </TimelineItem>
            <TimelineItem v-if="item.category == 8" :key="index">
              <p><span>操作时间：{{item.operationTime}}</span><span>跟进类型：留资</span><span>操作人：{{item.operatorName}}</span></p>
              <p><span>留资号码：{{item.stayPhone}}</span><span>客户姓名：{{item.customerName}}</span><span>性别：{{item.gender == 1 ? '男' : item.gender == 2 ? '女' : ''}}</span></p>
              <p><span>备用号码：{{item.reserve}}</span><span>微信号：{{item.wxNumber}}</span></p>
            </TimelineItem>
            <TimelineItem v-if="item.category == 9" :key="index">
              <p><span>操作时间：{{item.operationTime}}</span><span>跟进类型：回访</span><span>操作人：{{item.operatorName}}</span></p>
              <p><span>回访环节：{{reviewActionList[item.reviewAction]}}</span><span>回访时间：{{item.timeData}}</span></p>
              <p>回访备注：{{item.gistRemark}}</p>
              <p class="imageP">
                <b>图片：</b>
                <strong id="annexBox1">
                  <img v-for="(item, index) in item.resourceUrl && item.resourceUrl.split(',')" :key="index" :src="item" >
                </strong>
              </p>
            </TimelineItem>
            <TimelineItem v-if="item.category == 10" :key="index">
              <p><span>操作时间：{{item.operationTime}}</span><span>跟进类型：邀约到访</span><span>操作人：{{item.operatorName}}</span></p>
              <p><span style=" font-weight: 600;">线上邀约</span></p>
              <p><span>客户：{{item.customerName}}</span><span>到访案场：{{item.buildingAlias}}</span></p>
              <p><span>到访时间：{{item.timeData}}</span><span>接待人：{{item.receptionName}}</span></p>
              <p>要点备注：{{item.gistRemark}}</p>
              <p><span style=" font-weight: 600;">到访结果</span></p>
              <p><span>到访状态：{{item.visitStatus == 1 ? '未到访' : item.visitStatus == 2 ? '已到访' : ''}}</span><span>实际到访时间：{{item.realTime}}</span></p>
              <p><span>实际接待人：{{item.realReceptionName}}</span></p>
              <p>到访备注：{{item.visitRemark}}</p>
            </TimelineItem>
            <TimelineItem v-if="item.category == 11" :key="index">
              <p><span>操作时间：{{item.operationTime}}</span><span>跟进类型：来人</span><span>操作人：{{item.operatorName}}</span></p>
              <p><span>客户：{{item.customerName}}</span><span>到访案场：{{item.buildingAlias}}</span></p>
              <p><span>实际到访时间：{{item.realTime}}</span><span>实际接待人：{{item.realReceptionName}}</span></p>
              <p>要点备注：{{item.gistRemark}}</p>
            </TimelineItem>
            <TimelineItem v-if="item.category == 12" :key="index">
              <p><span>批注时间：{{item.operationTime}}</span><span>批注人：{{item.operatorName}}</span></p>
              <p>要点备注：{{item.gistRemark}}</p>
            </TimelineItem>
          </template>
        </Timeline>
        <div class="pagePublicStyle" v-show="pageData.total > 0">
          <div class="totalCount">
            当前第 {{pageData.page}} 页，
            当前第 {{(pageData.page-1)*pageData.rows+1}} 条到第 {{pageData.page*pageData.rows>pageData.total?pageData.total:pageData.page*pageData.rows}} 条，
            共 {{pageData.total}} 条
          </div>
          <Page class="pager" :total="pageData.total" :current="pageData.page" :pageSize="pageData.rows" :page-size-opts="pageData.pageSizeOpts" @on-change="pageOnChangeFun" @on-page-size-change="pageOnPageSizeChangeFun" placement="top" show-elevator show-sizer />
          </div>
        </div>
      <!-- 添加跟进 -->
      <Modal v-model="AddFollowUp" :title="AddFollowUpTitle" @on-cancel="AddFollowUpCancel()" width="600" :mask-closable="false" :footerHide="true" class="FollowUpRecordContModel" :style="{opacity: AddFollowUpOpacity}">
        <!-- 回访 -->
        <div v-show="AddFollowUpState == 'ReturnVisit'" class="subscribeModalStateModal">
          <Form ref="ReturnVisitRef" :model="ReturnVisitForm" :rules="ReturnVisitRules" :label-width="100">
            <FormItem label="回访环节：" style=" margin: 16px 0 16px;">
              {{servicePersonnelId.status == 11 ? '互动未留资' : servicePersonnelId.status == 12 ? '留资未到访' : servicePersonnelId.status == 13 ? '到访未认购' : servicePersonnelId.status == 14 ? '认购未签约' : servicePersonnelId.status == 15 ? '已签约' : '-'}}
            </FormItem>
            <FormItem label="回访时间：" prop="returnVisitTime">
              <DatePicker v-model="ReturnVisitForm.returnVisitTime" type="datetime" placeholder="请选择回访时间" style="width: 100%" format="yyyy-MM-dd HH:mm"></DatePicker>
            </FormItem>
            <FormItem label="回访备注：" prop="RevisitNotes">
              <Input type="textarea" v-model="ReturnVisitForm.RevisitNotes" placeholder="请输入回访备注"></Input>
            </FormItem>
            <FormItem label="上传图片：">
              <div class="demo-upload-list" v-for="(item, index) in ReturnVisitForm.fileList" :key="index">
                <img :src="item.url">
                <div class="demo-upload-list-cover">
                    <Icon type="ios-eye-outline" @click="handleView(item.url)"></Icon>
                    <Icon type="ios-trash-outline" @click="handleRemove(index)"></Icon>
                </div>
              </div>
              <Upload
                ref="upload"
                multiple
                :show-upload-list="false"
                :data="uploadData"
                name="multipartFile"
                :headers="uploadHeaders"
                :on-success="handleSuccess"
                :format="['jpg','png']"
                :max-size="2048"
                type="drag"
                :on-exceeded-size="handleMaxSize"
                :on-format-error="handleFormatError"
                :action="uploadImageUrl"
                style="display: inline-block;width:58px;">
                <div style="width: 58px;height:58px;line-height: 58px;">
                  <Icon type="ios-camera" size="20"></Icon>
                </div>
              </Upload>
            </FormItem>
            <div class="footer">
              <Button @click="AddFollowUpCancel">取消</Button>
              <Button type="info" @click="AddFollowUpCanok">保存</Button>
            </div>
          </Form>
        </div>
        <!-- 邀约到访 -->
        <div v-show="AddFollowUpState == 'InvitationToVisit'" class="subscribeModalStateModal">
          <Form ref="InvitationToVisitRef" :model="InvitationToVisitForm" :rules="InvitationToVisitRules" :label-width="100">
            <FormItem label="客户：" style=" margin: 16px 0 16px;">
              {{servicePersonnelId.name +' '+servicePersonnelId.phone || ''}}
            </FormItem>
            <FormItem label="到访案场：" style=" margin: 16px 0 16px;">
              {{servicePersonnelId.buildingAlias || ''}}
            </FormItem>
            <FormItem label="到访时间：" prop="VisitTime">
              <DatePicker v-model="InvitationToVisitForm.VisitTime" type="datetime" placeholder="请选择到访时间" style="width: 100%" format="yyyy-MM-dd HH:mm"></DatePicker>
            </FormItem>
            <FormItem label="接待人：" prop="inviteAvisitor">
              <div class="receptionPeopleStyle" @click="receptionPeopleClick('Invitation')">{{InvitationToVisitForm.inviteAvisitorName || '请选择接待人'}}</div>
            </FormItem>
            <FormItem label="要点备注：" prop="KeyNotesVal">
              <Input maxlength='500' type="textarea" v-model="InvitationToVisitForm.KeyNotesVal" placeholder="请输入要点备注"></Input>
            </FormItem>
            <div class="footer">
              <Button @click="AddFollowUpCancel">取消</Button>
              <Button type="info" @click="AddFollowUpCanok">保存</Button>
            </div>
          </Form>
        </div>
        <!-- 来人 -->
        <div v-show="AddFollowUpState == 'RetainCapital'" class="subscribeModalStateModal">
          <Form ref="retainCapitalRef" :model="retainCapitalForm" :rules="retainCapitalRules" :label-width="130">
            <FormItem label="客户：" style=" margin: 16px 0 16px;">
              {{servicePersonnelId.name +' '+servicePersonnelId.phone || ''}}
            </FormItem>
            <FormItem label="到访案场：" style=" margin: 16px 0 16px;">
              {{servicePersonnelId.buildingAlias || ''}}
            </FormItem>
            <FormItem label="实际到访时间：" prop="date">
              <DatePicker v-model="retainCapitalForm.date" type="datetime" placeholder="请选择实际到访时间" style="width: 100%" format="yyyy-MM-dd HH:mm"></DatePicker>
            </FormItem>
            <FormItem label="实际接待人：" prop="people">
              <div class="receptionPeopleStyle" @click="receptionPeopleClick('Comer')">{{retainCapitalForm.peopleName || '请选择实际接待人'}}</div>
            </FormItem>
            <FormItem label="要点备注：" prop="KeyNotes">
              <Input maxlength='500' type="textarea" v-model="retainCapitalForm.KeyNotes" placeholder="请输入要点备注"></Input>
            </FormItem>
            <div class="footer">
              <Button @click="AddFollowUpCancel">取消</Button>
              <Button type="info" @click="AddFollowUpCanok">保存</Button>
            </div>
          </Form>
        </div>
      </Modal>
      <!-- 图片放大 -->
      <Modal title="图片预览" v-model="imageVisible" :footerHide="true">
          <img :src="previewAddress" style="width: 100%">
      </Modal>
      <!-- 接的人 -->
      <receptionistModel :chooseWhoPickUp="chooseWhoPickUp" @jieDaiRenCancel="jieDaiRenCancel" @jieDaiRenOk="jieDaiRenOk"></receptionistModel>
      <!-- 若有客户进度到访以上的，则不可保存成功 -->
      <Modal width="400" v-model="customerVisitState" :mask-closable="false" :footerHide="true" :closable='false' class="customerVisitModel">
        <div class="cont">
          <p style=" font-size: 18px;">客户已到访案场</p>
          <p>归属人：{{successInfo.username}}({{successInfo.orgName}})</p>
          <p>楼盘：{{successInfo.buildingAlias}}</p>
          <div class="footer">
            <Button type="primary" @click="customerVisitOK">OK</Button>
          </div>
        </div>
      </Modal>
    </div>
</template>
<script>
  import tool from "@/common/tool.js"
  import secret from "@/common/secret.js"
  import receptionistModel from './receptionistModel'
  import { followRecordGetByCustomerId, customerAddReturnVisit, customerAddInvitationToVisit, followRecordVisitResult,customerAddBearer, businessUsers, userGetBelongingUser, conditionList ,followUp} from "@/api/customerManagement.js";
  import Helper from "@/common/helper.js";
  import {unloadImageAll} from "@/api/building"
  export default {
    components: {
      receptionistModel
    },
    props: ['servicePersonnelId'],
    data() {
        return {
          successInfo: '',
          customerVisitState: false,
          bulletFrameType: '',
          previewAddress: '',
          uploadData: {
            appName: 'M-Web',
            appVersion: '1.2.2',
            title: new Date().getTime()
          },
          appId:tool.getStorage("appId"),
          uploadHeaders: {'token': tool.getToken()},
          uploadImageUrl: unloadImageAll,
          reviewActionList: ['-', '互动未留资', '留资未到访', '到访未认购', '认购未签约', '已签约'],
          pageData: {
            total: 0,
            page: 1,
            rows: 10,
            pageSizeOpts: [10, 20, 30, 50]
          },
          customerPortrait: [],
          AddFollowUpOpacity: 1,
          chooseWhoPickUp: false,
          AddFollowUpTitle: '',
          operationFollowRecord: '-4',
          operationFollowRecordList: [{label: '全部跟进', value: '-4'}, {label: '跟进计划', value: '1'}, {label: '首看回访', value: '2'}, {label: '回笼回访', value: '3'}, {label: '日常回访', value: '4'}, {label: '操作', value: '6'}],
          operationFollowRecordListB: [{label: '全部跟进', value: '-4'}, {label: '线上互动', value: '7'}, {label: '留资', value: '8'}, {label: '回访', value: '9'}, {label: '邀约到访', value: '10'}, {label: '来人', value: '11'}],
          RecordList:[],
          viewer: null,
          AddFollowUp: false,
          AddFollowUpState: '',
          retainCapitalForm: {
            KeyNotes: '',
            date: '',
            people: '',
            peopleName: ''
          },
          retainCapitalRules: {
            date: [
              { required: true, type: 'date', message: '请选择实际到访时间', trigger: 'change' }
            ],
            KeyNotes: [
              { required: true, message: '请输入要点备注', trigger: 'blur' }
            ],
            people: [
              { required: true, message: '请输入实际接待人', trigger: 'change' }
            ],
          },
          returnChannelList: [{label: 'xxxx', value: '-1'}, {label: 'xxxx', value: '1'}, {label: 'xxx', value: '2'}],
          ReturnVisitForm: {
            returnVisitTime: '',
            RevisitNotes: '',
            fileList: [],
          },
          ReturnVisitRules: {
            returnVisitTime: [
              { required: true, type: 'date', message: '请选择回访时间', trigger: 'change' }
            ],
            RevisitNotes: [
              { required: true, message: '请输入回访备注', trigger: 'blur' }
            ],
          },
          imageVisible: false,
          InvitationToVisitForm: {
            VisitTime: '',
            KeyNotesVal: '',
            inviteAvisitor: '',
            inviteAvisitorName: ''
          },
          InvitationToVisitRules: {
            VisitTime: [
                { required: true, type: 'date', message: '请选择到访时间', trigger: 'change' }
            ],
            KeyNotesVal: [
              { required: true, message: '请输入要点备注', trigger: 'blur' }
            ],
            inviteAvisitor: [
              { required: true, message: '请输入接待人', trigger: 'change' }
            ],
          },
        }
    },
    methods: {
      operationFollowRecordFun() {
        this.getFollowUp()
      },
      // 若有客户进度到访以上的
      customerVisitOK() {
        this.customerVisitState = false
      },
      // 分页 页码改变事件
      pageOnChangeFun(page) {
        this.pageData.page = page;
        this.getFollowUp();
      },
      // 分页 每页条数改变事件
      pageOnPageSizeChangeFun(rows) {
        this.pageData.rows = rows;
        this.pageData.page = 1;
        this.getFollowUp();
      },
      // 接的人
      receptionPeopleClick(val) {
        this.bulletFrameType = val
        this.AddFollowUpOpacity = 0
        this.chooseWhoPickUp = true
      },
      jieDaiRenCancel() {
        this.chooseWhoPickUp = false
        this.AddFollowUpOpacity = 1
      },
      jieDaiRenOk(val) {
        this.chooseWhoPickUp = false
        this.AddFollowUpOpacity = 1
        if (this.bulletFrameType == 'Invitation') {  // 邀约到访
          this.InvitationToVisitForm.inviteAvisitorName = val.actualHostNmae
          this.InvitationToVisitForm.inviteAvisitor = val.actualHost
          this.$refs.InvitationToVisitRef.validateField('inviteAvisitor')
        } else if(this.bulletFrameType == 'Comer') {  // 来人
          this.retainCapitalForm.peopleName = val.actualHostNmae
          this.retainCapitalForm.people = val.actualHost
          this.$refs.retainCapitalRef.validateField('people')
        }
      },
      // 图片
      handleView(val) {
        this.previewAddress = val
        this.imageVisible = true
      },
      handleRemove(index) {
        this.ReturnVisitForm.fileList.splice(index, 1)
      },
      // 上传地址
      handleSuccess(res, file) {
        if (res.code == '200') {
          this.ImageContents = false
          let dataJson = JSON.parse(secret.Decrypt(res.data));
          let params = {
            url: dataJson.imageURL,
            name: new Date().getTime()
          }
          this.ReturnVisitForm.fileList.push(params)
        } else {
          console.log('上传出错');
        }
      },
      handleMaxSize (file) {
        this.$Message.warning('单个图片不能超过2MB');
      },
      // 文件格式验证失败
      handleFormatError (file) {
        this.$Message.warning('图片格式只支持jpg,png格式！');
      },
      // 添加跟进
      AddFollowUpFun(type) {
        this.AddFollowUpState = type
        if (type == 'ReturnVisit') {
          this.AddFollowUpTitle = '回访'
          this.AddFollowUp = true
        } else if (type == 'InvitationToVisit') {
          this.AddFollowUpTitle = '邀约到访'
          conditionList({
            page: 1,
            rows: 10,
            status: 1,
            userCustomerId: this.$route.query.userCustomerId
          }).then(data=>{
            if (data && data.list && data.list.length > 0 && data.list[0].status == 1) {
              this.$Message.warning('当前客户存在邀约到访未完成');
            } else {
              userGetBelongingUser({
                customerType: this.servicePersonnelId.customerType == 36 ? 1 : 2,
                phone: this.servicePersonnelId.phone || '',
                customerId: this.$route.query.customerId
              }).then(resl=>{
                if (resl) {
                  if (resl.userId == JSON.parse(tool.getStorage('userMess')).userId) {
                    this.AddFollowUp = true
                  } else {
                    this.successInfo = resl
                    this.customerVisitState = true
                  }
                } else {
                  this.AddFollowUp = true
                }
              }).catch(err=>{
                this.$Message.error(err)
              })
            }
          })
        } else if (type == 'RetainCapital') {
          this.AddFollowUpTitle = '来人'
          this.AddFollowUp = true
        }
      },
      AddFollowUpCancel() {
        this.AddFollowUp = false
        if (this.AddFollowUpState == 'RetainCapital') { //  留资
          this.retainCapitalForm = {
            KeyNotes: '',
            date: '',
            people: '',
            peopleName: ''
          }
          this.$refs.retainCapitalRef.resetFields();
        } else if(this.AddFollowUpState == 'ReturnVisit') { //  回访
          this.ReturnVisitForm = {
            returnVisitTime: '',
            RevisitNotes: '',
            fileList: []
          }
          this.$refs.ReturnVisitRef.resetFields();
        } else if (this.AddFollowUpState == 'InvitationToVisit') {  //邀约到访
          this.InvitationToVisitForm = {
            VisitTime: '',
            KeyNotesVal: '',
            inviteAvisitor: '',
            inviteAvisitorName: ''
          }
          this.$refs.InvitationToVisitRef.resetFields();
        }
      },
      AddFollowUpCanok() {
        if (this.AddFollowUpState == 'RetainCapital') {   //来人
          this.$refs.retainCapitalRef.validate((valid) => {
            if (valid) {
              let params = {
                customerId: this.$route.query.customerId,
                userCustomerId: this.$route.query.userCustomerId,
                actualVisitTime: (this.retainCapitalForm.date && Helper.timestampToTime(this.retainCapitalForm.date)) || '',
                remark: this.retainCapitalForm.KeyNotes,
                actualReceptionistId:this.retainCapitalForm.people,
                followUp: 1,
                buildingId: this.servicePersonnelId.buildingId,
              }
              customerAddBearer(params).then(res=>{
                this.getFollowUp()
                this.AddFollowUp = false
                this.$Message.success('添加来人跟进成功!');
              }).catch(err=>{
                this.$Message.error(err)
              })
            }
          })
        } else if(this.AddFollowUpState == 'ReturnVisit') {  // 回访
          this.$refs.ReturnVisitRef.validate((valid) => {
            if (valid) {
              let params = {
                customerId: this.$route.query.customerId,
                userCustomerId: this.$route.query.userCustomerId,
                remark: this.ReturnVisitForm.RevisitNotes,
                returnVisitPhase: this.servicePersonnelId.status == 11 ? 1 : this.servicePersonnelId.status == 12 ? '2' : this.servicePersonnelId.status == 13 ? '3' : this.servicePersonnelId.status == 14 ? '4' : this.servicePersonnelId.status == 15 ? '5' : '', // 1:互动未留资 2:留资未到访 3:到访未认购 4:认购未签约 5:已签约
                returnVisitTime: (this.ReturnVisitForm.returnVisitTime && Helper.timestampToTime(this.ReturnVisitForm.returnVisitTime)) || '',
                followUp: 1,
              }
              let imgUrl = []
              if (this.ReturnVisitForm.fileList.length > 0) {
                this.ReturnVisitForm.fileList.map((item) => {
                  imgUrl.push(item.url)
                })
              }
              params.pictureUrl = imgUrl.join(",")
              customerAddReturnVisit(params).then(res=>{
                this.getFollowUp()
                this.AddFollowUp = false
                this.$Message.success('添加回访跟进成功!');
              }).catch(err=>{
                this.$Message.error(err)
              })
            }
          })
        } else if (this.AddFollowUpState == 'InvitationToVisit') {  // 邀约到访
          this.$refs.InvitationToVisitRef.validate((valid) => {
            if (valid) {
              let params = {
                customerId: this.$route.query.customerId,
                userCustomerId: this.$route.query.userCustomerId,
                invitationVisitTime: (this.InvitationToVisitForm.VisitTime && Helper.timestampToTime(this.InvitationToVisitForm.VisitTime)) || '',
                remark: this.InvitationToVisitForm.KeyNotesVal,
                receptionistId: this.InvitationToVisitForm.inviteAvisitor,
                scheduleFlag: 1,
                followUp: 1,
                buildingId: this.servicePersonnelId.buildingId,
              }
              customerAddInvitationToVisit(params).then(res=>{
                this.$store.commit("basicinformation", Math.random())
                this.getFollowUp()
                this.AddFollowUp = false
                this.$Message.success('添加邀约到访跟进成功!');
              }).catch(err=>{
                this.$Message.error(err)
              })
            }
          })
        }
      },


      // 初始化获取数据
      // initData() {
      //   // 获取跟进记录
      //   let params = {
      //     userCustomerId: this.$route.query.userCustomerId,
      //     page: this.pageData.page,
      //     rows: this.pageData.rows,
      //     category: this.operationFollowRecord == '-4' ? '' : this.operationFollowRecord,
      //     userId: this.servicePersonnelId.servicePersonnelVal,
      //     buildingId: this.servicePersonnelId.buildingId
      //   }
      //   followRecordGetByCustomerId(params).then(res=>{
      //     if (res && res.list) {
      //       this.pageData.total = Number(res.total)
      //       console.log('this.pageData.total', this.pageData.total,res,'appid------------------',this.appId)
      //       this.customerPortrait = res.list
      //     } else {
      //       this.pageData.total = 0
      //       this.customerPortrait = []
      //     }
      //   }).catch(err=>{
      //     this.$Message.error(err)
      //   })
      //   //查看到访结果  若果是邀约未到访  就将邀约到访按钮隐藏
      //   //this.VisitResult()
      // },

      //查询跟进记录
      getFollowUp(val){
        console.log(val,'跟进人的信息');        
        let params = {
          page: this.pageData.page,
          rows: this.pageData.rows,
          userCustomerId: this.$route.query.userCustomerId,
          category: '4,12',
          buildingId:this.servicePersonnelId.buildingId,
          customerId:this.$route.query.customerId,
          operatorId:JSON.parse(tool.getStorage('userMess')).userId
        };

        followUp(params)
          .then((res) => {
            console.log(res,'客户跟进记录');
            this.customerPortrait = res.records;
            this.pageData.total = Number(res.total)
          })
          .catch((err) => {
            this.$Message.error(err);
          });
      },



      VisitResult(){
        followRecordVisitResult().then(res=>{

        })
      }
    },
    computed: {

    },
    created() {
      this.RecordList =  this.$tool.getStorage("appId") == 36?this.operationFollowRecordList:this.operationFollowRecordListB;
    },
    mounted() {
    },
    watch: {
      servicePersonnelId:{
        handler(newV,oldV){
          // 初始化获取数据
          this.getFollowUp()
          // 团队人员
          businessUsers({
            page: 1,
            rows: 10,
            buildingId: this.servicePersonnelId.buildingId,
            positionType: 2
          }).then(res=>{
            if (res && res.list) {
              this.retainCapitalForm.peopleName = res.list[0] && res.list[0].userName
              this.retainCapitalForm.people = res.list[0] && res.list[0].userId
              this.InvitationToVisitForm.inviteAvisitorName = res.list[0] && res.list[0].userName
              this.InvitationToVisitForm.inviteAvisitor = res.list[0] && res.list[0].userId
            }
          }).catch(err=>{
            this.$Message.error(err)
          })
        },
        deep: true, //深度遍历
        immediate: true //默认false，设置为true会立即执行
      },
    }
  }
</script>
<style lang="scss" scoped>
  .demo-upload-list{
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    margin-right: 4px;
  }
  .demo-upload-list img{
      width: 100%;
      height: 100%;
  }
  .demo-upload-list-cover{
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0,0,0,.6);
  }
  .demo-upload-list:hover .demo-upload-list-cover{
      display: block;
  }
  .demo-upload-list-cover i{
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      margin: 0 2px;
  }
  .footer{
      text-align: center;
      button{
        width: 80px;
        margin: 0 10px;
      }
    }
  .FollowUpRecordContModel{
    .ivu-tabs {
      overflow: visible;
    }
  }
  .FollowUpRecordCont{
    .FollowUpRecordMian{
      margin-top: 16px;
      .ivu-timeline-item-content{
        padding-bottom: 0;
      }
      p{
        margin-bottom: 4px;
      }
      span{
        display: inline-block;
        width: 280px;
        margin-right: 30px;
        vertical-align: middle;
      }
      .imageP{
        b{
          font-weight: normal;
          vertical-align: top;
        }
        img{
          width: 60px;
          height: 60px;
          margin-right: 10px;
        }
      }
    }
  }
  /deep/ .ivu-poptip-popper{
    z-index: 900;
  }
  /deep/ .ivu-modal-body{
    padding: 0;
  }
  .subscribeModalStateModal{
    overflow-y:auto;
    overflow-x:hidden;
    padding: 0 16px 16px 16px;
  }
  .receptionPeopleStyle{
    display: inline-block;
    width: 100%;
    height: 32px;
    line-height: 1.5;
    padding: 4px 7px;
    font-size: 14px;
    border: 1px solid #dcdee2;
    border-radius: 4px;
    color: #515a6e;
    background-color: #fff;
  }
  /* page */
  .pagePublicStyle {
    width: 100%;
    margin: 14px 0;
    height: 32px;
    .totalCount {
      position: absolute;
      height: 32px;
      line-height: 32px;
      display: inline-block;
      vertical-align: top;
      color: #657180;
    }
    .pager {
      display: inline-block;
      vertical-align: top;
      position: absolute;
      right: 20px;
      background-color: #fff;
      padding-left: 50px;
    }
  }
  .noData{
    width: 100%;
    font-size: 16px;
    text-align: center;
    padding: 50px 0;
  }
  .customerVisitModel{
    .cont{
      padding: 16px;
    }
    p{
      margin-bottom: 10px;
    }
    .footer{
      padding-top: 20px;
      text-align: center;
      button{
        width: 120px;
        margin: 0 10px;
      }
    }
  }
</style>
